<template>
	<view class="imPop mask-wrapper" v-if="show" @click="setShowState">
		<view class="content" :class="{ PopOut: showState }">
			<view class="tit">
				<text class="text">上传形象建议 </text>

				<uni-icons type="clear" size="30" color="#7E8BFF"></uni-icons>
			</view>
			<view class="example">
				<text class="example-tit">形象示例</text>
				<view
					style="
						margin-top: 20rpx;
							background-color: #fff;
						display: flex;
						justify-content: space-between;
						overflow: hidden;
						border-radius: 20rpx;
					"
				>
					<image
						style="height: 500rpx; overflow: hidden; border-radius: 20rpx; width: 50%"
						src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240908-150352@2x.jpg"
					></image>
					<view
						style="
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: left;
							margin-left: 50rpx;
							flex: 1;
							gap: 30rpx 0;
						"
					>
						<view style="display: flex; align-items: center"
							><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 正面站立</view
						>
						<view style="display: flex; align-items: center"
							><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 全身照</view
						>
						<view style="display: flex; align-items: center"
							><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 身体无遮挡</view
						>
						<view style="display: flex; align-items: center"
							><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 无俯仰角</view
						>
					</view>
				</view>
			</view>
			<view class="example">
				<text class="example-tit">形象示例</text>
				<view style="display: flex; justify-content: space-between; gap: 20rpx; margin-top: 20rpx">
					<view class="item">
						<image
							style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
							src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240908-150433@2x.jpg"
						></image>
						<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 侧脸侧身</view>
					</view>
					<view class="item">
						<image
							style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
							src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240908-150445@2x.jpg"
						></image>
						<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 光线暗淡</view>
					</view>
					<view class="item">
						<image
							style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
							src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240908-150514@2x.jpg"
						></image>
						<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 手拿物品</view>
					</view>
					<view class="item">
						<image
							style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
							src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240908-150525@2x.jpg"
						></image>
						<view class="txt">
							<uni-icons
								style="width: 48rpx; height: 48rpx; overflow: hidden"
								color="red"
								type="closeempty"
								size="24"
							></uni-icons>
							复杂背景</view
						>
					</view>
				</view>
			</view>
			<view class="desc"> 本功能将可能采集敏感信息用于AI合成，如上传非本人信息，请确保已获得权利人的明确许可。 </view>
			<button class="uploadImg" @click="handleUploadImg">上传图片</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			showState: false,
		};
	},
	watch: {
		show: {
			handler(newVal) {
				setTimeout(() => {
					this.showState = newVal;
				}, 5);
			},
		},
	},
	methods: {
		setShowState() {
			// 控制用户多次点击
			if (!this.showState) return;
			this.showState = false;
			setTimeout(() => {
				this.$emit('handleClose', false);
			}, 330);
		},

		handleUploadImg() {
			this.$emit('getUploadImg');
		},
	},
};
</script>

<style lang="scss" scoped>
.imPop {
	color: #333;
	.content {
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0 0;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: -100%;
		padding: 46rpx;
		transition: 0.3s all;
		.example {
			margin-top: 40rpx;
			.example-tit {
				color: #9ea2ad;
				font-size: 28rpx;
			}
			.item {
				.txt {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 24rpx;
				}
			}
		}
		.desc {
			margin: 20rpx 0;
			font-size: 24rpx;
			color: #686d81;
		}
		.uploadImg {
			background: linear-gradient( 245deg, #7E8BFF 5%, #A3ACFF 99%);
			color: #fff;
			border-radius: 50rpx;
		}
		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			font-weight: 700;
		}
		.top-area {
			margin-top: 104rpx;

			.Title {
				font-weight: 600;
				font-size: 48rpx;
				color: #16151f;
				line-height: 56rpx;
			}

			.TextSize {
				margin-top: 6rpx;
				margin-bottom: 64rpx;
			}
		}
	}

	.PopOut {
		bottom: 0;
	}

	.form {
		.formItme {
			box-sizing: border-box;
			// width: 622rpx;
			height: 96rpx;
			background: #f5f5f7;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			padding: 26rpx 40rpx;
			margin-bottom: 32rpx;
		}

		.Btn {
			margin-bottom: 62rpx;
		}
	}
}
</style>
